<div class="row animate fadeIn">
    <div class="ibox-title" style="border:none;"><h5 style="color: #00afef"><i>Add</i></h5>
        <div class="ibox-tools">    
             <button class="btn btn-primary btn-sm save-btn-tab" id="save_btn">Save</button>
             <a id="cancel_add" class="btn btn-sm btn-outline btn-info">Cancel</a>
        </div>
     </div>
     <div class="ibox-content">
      <form class="form-horizontal" id="read_tasks">
            <div class="form-group">
                <label class="col-xs-4 control-label">Tasks Name *</label>
                <div class="col-xs-5">
                    <input type="text" class="form-control" name="task_name">
                </div>
             </div>
             <div class="form-group">
                <label class="col-xs-4 control-label">Zones *</label>
                <div class="col-xs-5">
                    <select name="zone" class="form-control chosen" id="">
                        <option value="">--</option>
                        <?php foreach ($zones as $key): ?>
                            <option value="<?php echo $key->zone_name; ?>"><?php echo $key->zone_name; ?></option>
                        <?php endforeach;?>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-4 control-label">Meter Reader *</label>
                <div class="col-xs-5">
                    <select name="meter_reader" class="form-control chosen" id="">
                        <option value="">--</option>
                        <?php foreach ($meter_reader as $key): ?>
                            <option value="<?php echo $key->user_id; ?>"><?php echo $key->name; ?></option>
                        <?php endforeach;?>
                    </select>
                </div>
            </div>
            <div class="form-group">
              <label class="col-xs-4 control-label">Sequence: *</label>
              <div class="col-xs-5">
                <div class="input-group m-b">
                  <input name="seq_from" type="text" placeholder="ex: 0" class="form-control">
                  <span class="input-group-addon">-</span>
                  <input name="seq_to" type="text" placeholder="ex: 1000" class="form-control">
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="col-xs-4 control-label">Year-Month: *</label>
              <div class="col-xs-5">
                <div class="input-group m-b">
                  <select name="year" class="form-control chosen">
                    <?php
                    $mon = array('','January','February','March','April','May','June','July','August','September','October','November','December');
                    for($i = date('Y'); $i >= 2010 ; $i--):?>
                      <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
                    <?php endfor; ?>
                  </select>
                  <span class="input-group-addon">-</span>
                   <select name="month" class="form-control chosen">
                    <?php for($o = 1; $o <= 12; $o++):?>
                      <option <?php echo ($o == date('m') ? 'selected' : ''); ?> value="<?php echo $o < 10 ? '0'.$o : $o; ?>"><?php echo $mon[$o]; ?></option>
                    <?php endfor; ?>
                 </select>
                </div>
              </div>
            </div>
        </form>
    </div>
    <!-- row for sequence add -->
 </div>
<script>
    $(document).ready(function () {

      //================================================
      //
      //        START INITIALIZATION
      //
      //================================================

      $('#read_tasks').data('serialize',$('#read_tasks').serialize()); 
      $(".chosen").chosen({width:"100%;"});
      $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
      });

      //================================================
      //        END INITIALIZATION
      //================================================


      //================================================
      //
      //        START FORM VALIDATION SECTION
      //
      //================================================

      $("#read_tasks").validate({
           rules: {
               task_name: {
                   required: true
               },
               zone: {
                   required: true
               },
               seq_from: {
                   required: true
               },
               seq_to: {
                   required: true
               },
               year: {
                   required: true
               },
               month: {
                   required: true
               }
           }
       });

      //================================================
      //        END FORM VALIDATION
      //================================================


      //================================================
      //
      //        START PROCESSING
      //
      //================================================

      $('#save_btn').click(function(event) {
          if($("#read_tasks").valid() == true){
            $.ajax({
              type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax') . '/insert'); ?>",
                cache: false,
                dataType: 'json',
                data: $('#read_tasks').serialize(),
                success: function(e) {
                  $('#save_btn').removeAttr('disabled');
                  if(e[0].err == '1'){
                    notifymsg('danger',e[0].msg);
                  }else{
                    close_add(); active_search();
                    notifymsg('success','Success Insert');
                  }
                },
                beforeSend: function(){
                  $('#save_btn').attr('disabled',true);
                }
            });
          }
      });

      //================================================
      //  END PROCESSING
      //================================================

      function alert_cancel(){
            if($('#read_tasks').serialize()!=$('#read_tasks').data('serialize')){
                swal({
                    title: "Are you sure?",
                    text: "Your work will not be save",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Leave",
                    cancelButtonText: "Stay",
                    closeOnConfirm: true,
                    closeOnCancel: true },
                function (isConfirm) {
                    if (isConfirm) {
                        close_add(); active_search();
                        notifymsg("hide","hide");
                    } else {
                        swal("Cancelled");
                    }
                });
                }else{
                close_add(); active_search();
                notifymsg("hide","hide");
            }
        } 
        $('#cancel_add').click(function () {
          if($('#cancel_add').html() == "Complete"){
            close_add(); active_search();
            notifymsg("hide","hide");
          }else{            
            alert_cancel();
          }
         });
        $('#addX').click(function(){
            alert_cancel();        
       });
    });
</script>